<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="/jquery-zclip-master/jquery.zclip.js"></script>
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
</head>
<body>
<div style="margin: 10px 500px;height: 50px">
    <div class='copy-tips' hidden><div class='copy-tips-wrap' style="font-size: 25px">☺ 复制成功</div></div>
</div>
<div class="info" style="width: 100%;height: auto">
    <div style="margin: 50px 200px;width:800px">
        <div style="width: 100%;font-size: 0px;vertical-align: middle">
            <div style="display:inline-block;width:40px;height: 40px;
            margin: 0px;line-height: 40px;background: greenyellow;
         border-radius: 50%;text-align: center;font-size: 25px">1</div>
            <div style="display: inline-block;width: 200px;height:5px;margin-bottom: 5px;
            background: greenyellow"></div>
            <div style="font-size: 25px;display:inline-block;width:40px;height: 40px;margin: 0px;line-height: 40px;background: greenyellow;border:2px solid greenyellow;border-radius: 50%;text-align: center">2</div>
            <div style="font-size: 25px;display: inline-block;width: 200px;height:5px;margin-bottom: 5px;background: greenyellow"></div>
            <div style="font-size: 25px;display:inline-block;width:40px;height: 40px;margin: 0px;line-height: 40px;background: greenyellow;border:2px solid greenyellow;border-radius: 50%;text-align: center">3</div>
            <div style="font-size: 25px;display: inline-block;width: 200px;height:5px;margin-bottom: 5px;background: greenyellow"></div>
            <div style="font-size: 25px;display:inline-block;width:40px;height: 40px;margin: 0px;line-height: 40px;background: greenyellow;border:2px solid greenyellow;border-radius: 50%;text-align: center">4</div>
        </div>
        <div style="display: inline-block;margin-right: 180px">
            <strong>买家下单</strong>
            <p style="margin: 0px"><small>2000-02-08</small></p>
            <p style="margin: 0px"><small>23:59:59</small></p>
        </div>
        <div style="display: inline-block;margin-right: 180px">
            <strong>买家付款</strong>
            <p style="margin: 0px"><small>2000-02-08</small></p>
            <p style="margin: 0px"><small>23:59:59</small></p>
        </div>
        <div style="display: inline-block;margin-right: 180px">
            <strong>商家发货</strong>
            <p style="margin: 0px"><small>2000-02-08</small></p>
            <p style="margin: 0px"><small>23:59:59</small></p>
        </div>
        <div style="display: inline-block">
            <strong>订单完成</strong>
            <p style="margin: 0px"><small>2000-02-08</small></p>
            <p style="margin: 0px"><small>23:59:59</small></p>
        </div>
    </div>
    <div class="panel panel-default" style="margin: 50px 200px;width:800px">
        <div class="panel-body">
            <div style="display: inline-block">
                <p><small>订单编号：</small><strong>{{data.goods.orderno}}</strong></p>
                <p><small>付款方式：</small><strong>{{data.pay.method}}</strong></p>
                <p>
                    <small>买家：</small><a>{{data.buyer.nickname}}</a>
                    <span class="glyphicon glyphicon-question-sign buyer"  data-container="body" data-toggle="popover" data-placement="right"></span>
                </p>
                <p><small>配送方式：</small><strong>{{data.pay.dispatching}}</strong></p>
                <p><small>收货人：</small><strong>{{data.buyer.truename}}</strong></p>
                <p id="tel"><small>电话：</small><strong>{{data.buyer.number}}</strong><a href="javescript:;" class="copy">复制</a></p>
            </div>
            <div style="display: inline-block;float: right">
                <p><small>订单状态：</small>
                    <strong style="font-size: 25px;color: burlywood">{{data.status}}</strong>
                    <strong>（买家已经付款，请商家尽快发货）</strong>
                </p>
                <p style="margin-top: 100px">
                    <small>友情提示： 如果无法进行发货，请及时联系买家进行妥善处理;</small>
                </p>
            </div>
        </div>
    </div>

    <div style="margin: 50px 200px;width:800px">
        <h2>商品信息</h2>
        <table class="table table-hover">
            <tr>
                <th>商品名称</th>
                <th>规格,编号,条码</th>
                <th>单价</th>
                <th>数量</th>
                <th>原价</th>
                <th>折扣后</th>
            </tr>
            <tr>
                <div style="vertical-align: middle">
                    <td style="width: 320px">
                        <img class="img-circle" style="width: 60px" :src="data.goods.url" alt="无法显示图片">
                        <span>{{data.goods.desc}}</span>
                    </td>
                    <td>
                        <p><small>规格：无</small></p>
                        <p><small>编码：无</small></p>
                        <p><small>条码：无</small></p>
                    </td>
                    <td>
                        <p>{{data.goods.price}}</p>
                    </td>
                    <td>
                        <p>{{data.goods.num}}个</p>
                    </td>
                    <td>
                        <p>{{data.price}}</p>
                    </td>
                    <td>
                        <p>{{data.price}}</p>
                    </td>
                </div>
            </tr>
        </table>
    </div>
    <div style="margin: 0px 200px;width:800px">
        <div style="float: right">
            <p><small>商品小计：{{data.price}}</small></p>
            <p><small>运费：0</small></p>
            <p><small>实付款：{{data.price*data.goods.num}}</small></p>
        </div>
    </div>
</div>

<script>
    var app=new Vue({
        el:".info",
        data: {
            data:
                {
                    goods: {
                        name: "五加种养殖",
                        time: "2018-7-15 20:36:16",
                        orderno: "ME20180715203616666794",
                        desc: "11.99体验新鲜采摘蔬菜套餐 60份",
                        price: "11.99",
                        num: "1",
                        url: "http://www.xgllsh.cn/attachment/images/1/merch/131/om3MI8nOI3NNlP2O24l74i34lAaaIp.jpg"
                    },
                    buyer: {
                        nickname: "笨牛牛 ",
                        truename: "严汝芹",
                        number: "18583119996"
                    },
                    pay: {
                        method: "微信支付",
                        dispatching: "快递"
                    },
                    price: "11.99",
                    status: "待发货",
                    id: 11
                }
        }
    });
    $(".buyer").hover(function (e) {

    },function (e) {

    });

    $(".buyer").popover({
        container:"body",
        html:true,
        content:"<img src='https://img01.sogoucdn.com/net/a/04/link?url=http%3A%2F%2Fimg01.sogoucdn.com%2Fapp%2Fa%2F100520024%2Ffd54aca5d568931c38696785a2e4a9b0&appid=122' alt='无法显示图片' style='width:100px;height:100px'>" +
        "<p>ID:&#9;1233</p>" +
        "<p>昵称:&#9;1233</p>" +
        "<p>姓名:&#9;1233</p>" +
        "<p>手机号:&#9;1233</p>" +
        "<p>微信号:&#9;1233</p>",
        trigger:"hover",
    });

/*
    $(".copy").on("click",function (e) {
        $("input").get(0).focus();
        $("input").get(0).setSelectionRange(0,1);
        var selection=window.getSelection();
        var range=selection.getRangeAt(0);
        range.setStart($('#tel').get(0).childNodes[1],0);
        range.setEnd($('#tel').get(0).childNodes[2],0);
        var str=range.toString();
        var res=document.execCommand("copy",true);
    });*/

    /*
    $(document).on("copy",function (e) {
        console.log(e);
        e.originalEvent.clipboardData.setData('text/plain', 'Hello, world!');
        e.preventDefault();
    });*/

    document.addEventListener('copy', function(e){
        e.clipboardData.setData('text/plain', 'Hello, world!');
        e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
        e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
    });

    $(function (e) {
        $(".copy").zclip({
            path: '/jquery-zclip-master/ZeroClipboard.swf',
            copy: function(){
                var text=$("#tel").get(0).childNodes[1].firstChild.nodeValue;
                //altert("copy");
                return text;
            },
            beforeCopy:function(){
                $(this).css("color","orange");
            },
            afterCopy:function(){
                $(".copy-tips").show(1000);
                $(".copy-tips").hide(3000);
            }
        });
    });


</script>
</body>
</html>